﻿@model _24_Hour_Blogger.ViewModels.ManagerPageViewModel
<div id="Content" data-bind="css: 'parentchild manager', with: $root.inProgress()">
    <article data-bind="attr: {class: pageViewModel.widgetDisplayMode()}">
        <figure>
            <h4>
                Blog Details
                <button data-bind="click: $root.toggleUI" value="Edit">Edit</button>
            </h4>
            <fieldset data-bind="css: pageViewModel.widgetSize() + ' max' + pageViewModel.widgetSize()">
                <dl>
                    <dd data-bind="text: BlogName"></dd>
                    <dt>Blog</dt>
                    <dd data-bind="text: BlogUrl"></dd>
                    <dt>Url</dt>
                    <dd data-bind="text: Synopsis"></dd>
                    <dt>Synopsis</dt>
                </dl>
            </fieldset>
        </figure>

        <form>
            <h4>
                Blog Settings
                <button data-bind="click: $root.saveInProgress" value="Add">Save</button>
                <button data-bind="click: $root.toggleUI" value="Add">Cancel</button>
            </h4>
            <fieldset>
                <ol>
                    <!--
                                        <li>
                                            <input data-bind="value: StatusId, checked: StatusId() == 1" type="checkbox" /><span>Published</span>
                                        </li>
                                        <li>
                                            <input data-bind="value: PrimaryCategoryId" />

                                        </li>
                    -->
                    <li>
                        <label>
                            Blog Name
                            <input data-bind="value: BlogName" title="Blog Name" type="text" />
                        </label>
                    </li>
                    <li>
                        <label for="BlogName">Blog Url</label>
                        <input data-bind="value: BlogUrl" title="Blog Url" type="text" />
                    </li>
                    <li>
                        <label for="BlogName">Synopsis</label>
                        <textarea data-bind="value: Synopsis" title="Synopsis"></textarea>
                    </li>
                    <li>
                        <label for="BlogName">Keywords</label>
                        <textarea data-bind="value: Keywords" title="Keyword(s)"></textarea>
                    </li>
                    <li>
                        <label for="BlogName">Description</label>
                        <textarea data-bind="value: Description" title="Description"></textarea>
                    </li>
                </ol>
            </fieldset>
        </form>

        <aside>
            <h4>
                Blog Roll
                <button value="Add" data-bind="click: $root.addBlog">Add</button>
            </h4>
            <fieldset>
                <ul data-bind="css: pageViewModel.widgetSize() + ' max' + pageViewModel.widgetSize(), foreach: $root.selectedEntity().Blogs">
                    <li data-bind="visible: Id() > 0, css: {selected: Id() == $root.inProgress().Id()}, click: $root.openBlog"><a href="#"><span data-bind="text: BlogName"></span></a></li>
                </ul>
            </fieldset>
        </aside>

        <section>
            <h4>
                Articles
                <button>Edit Mode</button> <button>Add</button>
            </h4>
            <table data-bind="css: 'max'+pageViewModel.widgetSize()">
                <thead>
                    <tr>
                        <th>Article</th>
                        <th>Blog</th>
                        <th>ArticleUrl</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $root.selectedEntity().Articles">
                    <tr><td data-bind="text: ArticleName"></td><td data-bind="text: BlogName"></td><td data-bind="text: ArticleUrl"></td></tr>
                </tbody>
            </table>
        </section>


        <section>
            <h4>
                Media
                <button>Edit Mode</button> <button>Add</button>
            </h4>
            <table data-bind="css: 'max'+pageViewModel.widgetSize()">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Thumbnail</th>
                        <th>Url</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $root.selectedEntity().Media">
                    <tr><td data-bind="text: ArticleName"></td><td data-bind="text: BlogName"></td><td data-bind="text: ArticleUrl"></td></tr>
                </tbody>
            </table>
        </section>
    </article>

    <article data-bind="css: pageViewModel.widgetDisplayMode()"></article>
</div>


<script language="javascript" type="text/javascript">
    var pageViewModel = null;
    var pageController = null;

    var config = { contextPath: '@Url.Content("~")', navigationMenuFile: "menu" };
    var logErrorUrl = '@Url.Action( "LogJavaScriptError", "Home" )';
    var showSpinner = false;

    $( document ).ready(function() {
//    window.pageController.viewControler.setElementSizes('medium')
        pageViewModel = new BloggerManagerViewModel();

        pageViewModel.populate(content, document.getElementById("Content"));

    });



    $(document).ready(function () {

        if (showSpinner) {
            var opts = {
                lines: 11, // The number of lines to draw
                length: 4, // The length of each line
                width: 8, // The line thickness
                radius: 20, // The radius of the inner circle
                corners: 0.7, // Corner roundness (0..1)
                rotate: 71, // The rotation offset
                direction: 1, // 1: clockwise, -1: counterclockwise
                color: '#000', // #rgb or #rrggbb or array of colors
                speed: 1, // Rounds per second
                trail: 35, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // The CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            };
            var target = document.getElementById('transmittingNotifier');
            var spinner = new Spinner(opts).spin(target);
        }
    });

</script>
<script>
    var content = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.JsonModel))
</script>